<template>
  <div class="vchart-attr">
    <CommonAttr />
    <px-form>
      <px-form-item label="标题">
        <px-switch v-model="option.title.show" active-text="显示标题" />
        <px-input v-model="option.title.text" placeholder="请输入内容" />
      </px-form-item>
      <px-form-item label="工具提示">
        <px-switch v-model="option.tooltip.show" active-text="显示提示" />
      </px-form-item>
      <px-form-item label="图例">
        <px-switch v-model="option.legend.show" active-text="显示图例" />
      </px-form-item>
      <px-form-item label="横坐标">
        <px-switch v-model="option.xAxis.show" active-text="显示横坐标" />
      </px-form-item>
      <px-form-item>
        <px-dropdown>
          <span class="px-dropdown-link"> 更换图表类型<i class="px-icon-arrow-down px-icon--right" /> </span>
          <template #dropdown>
            <px-dropdown-menu>
              <span v-for="(chart, index) in charts" :key="index" @click="selectchart(chart.type)">
                <px-dropdown-item>{{ chart.name }}</px-dropdown-item>
              </span>
            </px-dropdown-menu>
          </template>
        </px-dropdown>
      </px-form-item>
      <px-form-item label="静态数据源">
        <px-button @click="openStaticWinbox">修改数据</px-button>
      </px-form-item>
    </px-form>

    <px-dialog v-model="dialogVisible" title="数据修改" width="75%">
      <div ref="aceRef" class="ace" />
      <template #footer>
        <span class="dialog-footer">
          <px-button type="primary" @click="updatedata">更新数据</px-button>
        </span>
      </template>
    </px-dialog>
  </div>
</template>

<script setup lang="ts">
import ace from "ace-builds";
import "ace-builds/src-min-noconflict/theme-chrome";
import "ace-builds/src-min-noconflict/mode-json5";
import CommonAttr from "@visual/custom-component/common/CommonAttr.vue";
import { useComponent } from "@visual/stores";
import { storeToRefs } from "pinia";
import { computed, nextTick, ref } from "vue";
import { PxMessage } from "px-ui";

const componentStore = useComponent();
const { curComponent } = storeToRefs(componentStore);
const option = computed(() => (curComponent.value?.propValue as Record<string, any>).option);
const charts = [
  {
    type: "bar",
    name: "柱状图"
  },
  {
    type: "scatter",
    name: "散点图"
  },
  {
    type: "line",
    name: "折线图"
  },
  {
    type: "pie",
    name: "饼图"
  }
];

const dialogVisible = ref(false);
const editor = ref();
const aceRef = ref();
function openStaticWinbox() {
  dialogVisible.value = !dialogVisible.value;
  nextTick(() => {
    ace.config.set("basePath", "https://cdnjs.cloudflare.com/ajax/libs/ace/1.15.3/");
    editor.value = ace.edit(aceRef.value, {
      maxLines: 28,
      minLines: 28,
      fontSize: 14,
      theme: "ace/theme/chrome",
      mode: "ace/mode/json5",
      tabSize: 4,
      readOnly: false,
      enableBasicAutocompletion: true,
      enableLiveAutocompletion: true,
      enableSnippets: true
    });
    // 初始化图表数据在editor中
    let data = JSON.stringify(option.value.series.data);
    let xAxis = JSON.stringify(option.value.xAxis.data);
    editor.value.setValue(data + "\n" + xAxis);
  });
}

// 寻找数组[]
function findstring(str, ch1, ch2) {
  return str.substr(str.indexOf(ch1), str.indexOf(ch2) + 1);
}

// 更新数据editor中的数据修改
function updatedata() {
  let str = editor.value.getValue();
  let Arrdata = findstring(str, "[", "]");
  let ArrXAxis = findstring(str.substr(str.indexOf("]") + 1), "[", "]");
  option.value.series.data = JSON.parse(Arrdata);
  option.value.xAxis.data = JSON.parse(ArrXAxis);
  PxMessage.success("更新成功");
  dialogVisible.value = !dialogVisible.value;
}

// 更换表格类型
function selectchart(chartType: string) {
  option.value.series.type = chartType;
}
</script>

<style lang="scss">
.vchart-attr {
  margin: 13px;

  .ace {
    border: 1px solid #ebebeb;

    .ace_print-margin {
      display: none;
    }
  }
}
</style>
